import { Carousel } from 'react-responsive-carousel';
import Head from 'next/head'
import React from 'react'
import { css } from '@emotion/core'
import styled from '@emotion/styled'
import { Box, Heading, Text, Button } from '@chakra-ui/react';
// import axios from 'axiox';
import { baseURL } from '../axiosConfig'

const CarouselItem = styled.div`
  position: relative;
  & > div {
    width: 100%;
    max-width: 1200px;
    position: absolute;
    left: 50%;
    top: 0;
    padding-top: 180px;
    transform: translateX(-50%);
    text-align: left;
    color: #fff;
    & > p {
      width: 450px;
      margin: 20px 0;
      font-size: 14px;
    }
  }
  & > img {
    filter: brightness(60%);
  }
`

const swiperContainer = css`
  position: relative;
  & > .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
      display: flex;
      justify-content: center;
    }
  }
`

export default function Swiper () {
  return (
    <React.Fragment>
      <Head>
        <link rel="stylesheet" href="/css/carousel.min.css"></link>
      </Head>
      <Carousel css={swiperContainer} showArrows={false} showIndicators={false} showStatus={false}>
        <CarouselItem>
          <img src="/images/1.jpg" />
          <Box>
            <Heading as="h2" size="lg">KING IN BLACK</Heading>
            <Text>The next shocking chapter in Donny Cates and Ryan...</Text>
            <Button colorScheme="red">CHECK DETAIL</Button>
          </Box>
        </CarouselItem>
        <CarouselItem>
          <img src="/images/2.jpg" />
        </CarouselItem>
        <CarouselItem>
          <img src="/images/3.jpg" />
        </CarouselItem>
      </Carousel>
    </React.Fragment>
  )
}

export function loadSwiper () {
  // return axios.get('/api/swiper', {baseURL})
}